<template>
  <!-- 返回顶部 -->
  <view
    class="backTopContainer"
    style="position: fixed; bottom: 20rpx"
    :style="{ right: backTopRight }"
    @click="handleBackTop"
    ref="backTopContainer"
  >
    <uni-icons type="up" size="20" color="#fff"></uni-icons>
  </view>
</template>

<script>
export default {
  name: "BackTop",
  props: {
    isShow: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    backTopRight() {
      return this.isShow ? "0" : "-55rpx";
    },
  },
  methods: {
    handleBackTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.backTopContainer {
  width: 55rpx;
  height: 55rpx;
  border-top-left-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
  background-color: $main-color;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s;

  uni-icons {
    margin-top: -5rpx;
  }
}
</style>
